<template>
    <div class="login">
        <div class="login-box">
            <div style='overflow: hidden'>
                <div style='float:left'>
                    <img src="../../../images/logo.png" style='height:38px'>
                </div>
                <div style='float:right;display:flex;font-size:20px;font-weight: 500'>
                    <div style='margin-right: 40px;'>
                        <router-link to='/home/public/login'>
                            <span style='color:#464C5B'>登录</span>
                        </router-link>
                    </div>
                    <div>
                        <router-link to='/home/public/register'>
                            <span style='color:#06A0FD;'>注册</span>
                            <div style='width:12px;height:3px;background-color:#06A0FD;margin:0 auto'></div>
                        </router-link>
                    </div>
                </div>
            </div>
            <div style='width:320px;margin:50px auto'>
                <div class='input-text'>
                    <i class='iconfont icon-icon-test32' style='font-size:30px;margin-right:5px'></i>
                    <Input class='input-border' v-model='phone' placeholder="请输入手机号" @on-focus='inputFocus(1)' @on-blur='isFocus=0'></Input>
                </div>
                <div id='captcha' style='padding-top: 9px'></div>
                <div class='input-text' style='position: relative;' :class='{"input-text-color":isFocus==2}'>
                    <i class='iconfont icon-icon-test27' style='font-size:30px;margin-right:5px;'></i>
                    <Input class='input-border' v-model='phoneCode' placeholder="请输入验证码" @on-focus='inputFocus(2)' @on-blur='isFocus=0'></Input>
                    <div style='font-size: 13px;color:#06A0FD;transform: scale(0.9);position: absolute;right:0px;top:30px;cursor:pointer;' v-if='!captchaNum'>
                        <span @click="getCaptcha()">{{captchaTxt}}</span>
                    </div>
                    <div style='position: absolute;right:20px;top:25px;font-size:18px;color:#06A0FD;' v-else>{{captchaTxt}}s</div>
                </div>
                <div class='input-text' :class='{"input-text-color":isFocus==3}'>
                    <i class='iconfont icon-icon-test29' style='font-size:30px;margin-right:5px;margin-top:2px'></i>
                    <Input :type='showPassword ? "text" : "password"' class='input-border' v-model='password' placeholder="请输入新密码" @on-focus='inputFocus(3)' @on-blur='isFocus=0'></Input>
                    <Icon :type="showPassword ? 'eye' : 'eye-disabled'" style='cursor: pointer;margin-right: 0' @click.native='showPassword=!showPassword'></Icon>
                </div>
                <div style='position:relative;top:50px;width:320px' @click='login'>
                    <button class='btn-login'>重置密码</button>
                    <i class='iconfont icon-iconfontjiantou5 btn-arrow' style='font-size:30px'></i>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                phone: '',
                password: '',
                phoneCode:'',
                captchaTxt:'获取验证码',
                captchaNum:false,
                isFocus:0,
                geetest:false,
                result:{
                    geetest_challenge:'',
                    geetest_validate:'',
                    geetest_seccode:''
                },
                captchaObj:{},
                showPassword:false
            }
        },
        created(){
            this.fetch('/home/geetest?t='+(new Date()).getTime()).then(res=>{
                if(res&&res.data.data){
                    let data = res.data.data;
                     initGeetest({
                        // 以下 4 个配置参数为必须，不能缺少
                        gt: data.gt,
                        challenge: data.challenge,
                        offline: !data.success, // 表示用户后台检测极验服务器是否宕机
                        new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机

                        product: "popup", // 产品形式，包括：float，popup
                        width: "320px"
                    }, (captchaObj)=>{
                        this.geetest = true;
                        captchaObj.appendTo('#captcha');
                        this.captchaObj = captchaObj;

                        captchaObj.onSuccess( ()=> {

                            this.result = captchaObj.getValidate();
                            
                         })  

                    });
                }
            })
        },
        methods: {
            getCaptcha(){
                if (!this.phone) {
                    this.$Message.info('请输手机号');
                    return;
                }
                if(!(/^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/i.test(this.phone))){
                     this.$Message.info('手机号输入有误');
                     return;
                }
                

                this.fetch('/home/sendSmsCode', {
                    phone: this.phone,
                    geetestChallenge: this.result.geetest_challenge,
                    geetestValidate: this.result.geetest_validate,
                    geetestSeccode: this.result.geetest_seccode
                }).then((res) => {
                    if (res && res.data.code) {
                        this.captchaUuid = res.data.data.uuid;
                        this.captchaNum = true;
                        let i = 1;
                        this.captchaTxt = 60;
                        let captcha_interval = setInterval(() => {
                            this.captchaTxt -= i;
                            if (this.captchaTxt == 0) {
                                clearInterval(captcha_interval);
                                this.captchaTxt = '获取验证码';
                                this.captchaNum = false;
                            }
                        }, 1000);
                    } else {
                        this.captchaTxt = '获取验证码';
                        this.captchaNum = false;
                    }
                });
                
            },
            login(){
                if (!this.phone) {
                    this.$Message.info('请输手机号');
                    return;
                }
                 if(!(/^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/i.test(this.phone))){
                     this.$Message.info('手机号输入有误');
                     return;
                 }
                 
                if (!this.phoneCode) {
                    this.$Message.info('请输入验证码');
                    return;
                }
                if (!this.password) {
                    this.$Message.info('请输入新密码');
                    return;
                }

                this.fetch('/home/resetPassword', {
                    phone: this.phone,
                    password: this.password,
                    phoneCode: this.phoneCode,
                    phoneCodeUuid: this.captchaUuid
                }).then((res) => {
                    if (res && res.data.data) {
                        this.$Message.info('重置成功');
                        this.$router.push('/home/public/login');
                    }else{

                        this.captchaObj.reset();
                        this.result = {}
                        
                    }
                });
            },
            inputFocus(type){
                this.isFocus = type;
            }
        }
    }
</script>

